<template>
  <div class="data-collection-control">
    <!-- 高频数据采集控制区 -->
    <el-card class="box-card" shadow="hover">
      <div slot="header">高频数据采集控制</div>
      <div class="freq-setting">
        <el-select v-model="selectedSensor" placeholder="选择传感器" style="width: 180px; margin-right: 20px;">
          <el-option v-for="item in sensors" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-slider
          v-model="frequency"
          :min="100"
          :max="1000"
          :step="1"
          show-input
          style="width: 40%; margin-right: 20px;"
        />
        <el-input-number
          v-model="frequency"
          :min="100"
          :max="1000"
          :step="1"
          style="margin-right: 20px;"
        />
        <span>Hz</span>
        <el-button type="primary" @click="saveFrequency" style="margin-left: 20px;">保存设置</el-button>
      </div>
    </el-card>

    <!-- 采集启停控制 -->
    <el-card class="box-card" shadow="hover" style="margin-top: 24px;">
      <div slot="header">采集启停控制</div>
      <el-radio-group v-model="mode" style="margin-bottom: 16px;">
        <el-radio label="manual">手动模式</el-radio>
        <el-radio label="auto">自动模式</el-radio>
      </el-radio-group>
      <div v-if="mode === 'manual'">
        <el-button type="success" @click="startCollect">启动采集</el-button>
        <el-button type="danger" @click="stopCollect" style="margin-left: 12px;">停止采集</el-button>
      </div>
      <div v-else>
        <el-checkbox-group v-model="autoTriggers">
          <el-checkbox label="device">设备状态触发</el-checkbox>
          <el-checkbox label="time">时间计划触发</el-checkbox>
        </el-checkbox-group>
        <div v-if="autoTriggers.includes('device')" style="margin-top: 12px;">
          当设备负载
          <el-input-number
            v-model="deviceLoad"
            :min="0"
            :max="100"
            :step="1"
            style="width: 80px; margin: 0 8px;"
          />
          % 时启动采集
        </div>
        <div v-if="autoTriggers.includes('time')" style="margin-top: 12px;">
          <el-time-picker
            v-model="timeRange"
            is-range
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </div>
      </div>
    </el-card>

    <!-- 多设备与参数管理区 -->
    <el-card class="box-card" shadow="hover" style="margin-top: 24px;">
      <div slot="header">多设备与参数管理</div>
      <div class="device-management">
        <div class="device-tree">
          <el-input v-model="filterText" placeholder="搜索分组/设备" style="margin-bottom: 12px;" />
          <el-tree
            ref="deviceTree"
            :data="deviceGroups"
            :props="defaultProps"
            :filter-node-method="filterNode"
            node-key="id"
            highlight-current
            default-expand-all
            @node-click="handleNodeClick"
            class="filter-tree"
            style="width: 260px;"
          />
        </div>
        <div class="device-table">
          <el-table
            :data="filteredDevices"
            border
            style="width: 100%"
            size="small"
            v-loading="tableLoading"
          >
            <el-table-column type="selection" width="40" />
            <el-table-column prop="name" label="设备名称" width="120" />
            <el-table-column prop="group" label="分组" width="100" />
            <el-table-column prop="status" label="状态" width="80">
              <template slot-scope="scope">
                <el-tag :type="scope.row.status === '在线' ? 'success' : 'info'">{{ scope.row.status }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="params" label="采集参数">
              <template slot-scope="scope">
                <el-checkbox-group v-model="scope.row.selectedParams">
                  <el-checkbox v-for="p in allParams" :key="p" :label="p">{{ p }}</el-checkbox>
                </el-checkbox-group>
              </template>
            </el-table-column>
            <el-table-column label="采集频率(Hz)" width="120">
              <template slot-scope="scope">
                <el-input-number v-model="scope.row.collectFreq" :min="100" :max="1000" :step="1" size="small" />
              </template>
            </el-table-column>
          </el-table>
          <div style="margin-top: 12px; text-align: right;">
            <el-button type="primary" size="small" @click="saveBatchConfig">批量保存配置</el-button>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'DataCollectionControl',
  data() {
    return {
      // 高频采集
      sensors: [
        { label: '主轴振动', value: 'vibration' },
        { label: '主轴温度', value: 'temperature' },
        { label: '电流', value: 'current' },
        { label: '压力', value: 'pressure' }
      ],
      selectedSensor: 'vibration',
      frequency: 500,
      // 采集启停
      mode: 'manual',
      autoTriggers: [],
      deviceLoad: 70,
      timeRange: [],
      // 设备分组与参数
      filterText: '',
      deviceGroups: [
        {
          id: 1,
          label: '一车间',
          children: [
            {
              id: 11,
              label: '产线A',
              children: [
                { id: 111, label: '设备A1' },
                { id: 112, label: '设备A2' }
              ]
            },
            {
              id: 12,
              label: '产线B',
              children: [
                { id: 121, label: '设备B1' }
              ]
            }
          ]
        },
        {
          id: 2,
          label: '二车间',
          children: [
            {
              id: 21,
              label: '产线C',
              children: [
                { id: 211, label: '设备C1' },
                { id: 212, label: '设备C2' }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      allParams: ['振动', '温度', '电流', '压力'],
      devices: [
        { id: 111, name: '设备A1', group: '产线A', status: '在线', selectedParams: ['振动', '温度'], collectFreq: 500 },
        { id: 112, name: '设备A2', group: '产线A', status: '离线', selectedParams: ['电流'], collectFreq: 200 },
        { id: 121, name: '设备B1', group: '产线B', status: '在线', selectedParams: ['压力'], collectFreq: 300 },
        { id: 211, name: '设备C1', group: '产线C', status: '在线', selectedParams: ['振动'], collectFreq: 400 },
        { id: 212, name: '设备C2', group: '产线C', status: '离线', selectedParams: ['温度'], collectFreq: 150 }
      ],
      selectedGroupId: null,
      tableLoading: false
    }
  },
  computed: {
    filteredDevices() {
      if (!this.selectedGroupId) return this.devices
      // 只显示当前分组下的设备
      return this.devices.filter(d => d.group === this.getGroupNameById(this.selectedGroupId))
    }
  },
  watch: {
    filterText(val) {
      this.$refs.deviceTree && this.$refs.deviceTree.filter(val)
    }
  },
  methods: {
    saveFrequency() {
      this.$message.success(`已为${this.getSensorLabel(this.selectedSensor)}设置采集频率为 ${this.frequency} Hz`)
    },
    startCollect() {
      this.$message.success('采集已启动')
    },
    stopCollect() {
      this.$message.warning('采集已停止')
    },
    getSensorLabel(val) {
      const found = this.sensors.find(s => s.value === val)
      return found ? found.label : val
    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    handleNodeClick(node) {
      // 只允许点击到设备分组（产线）层级
      if (!node.children) {
        // 设备节点
        this.selectedGroupId = node.id
      } else {
        // 分组节点
        this.selectedGroupId = node.id
      }
    },
    getGroupNameById(id) {
      // 简单查找分组名
      for (const w of this.deviceGroups) {
        for (const l of w.children || []) {
          if (l.id === id) return l.label
          for (const d of l.children || []) {
            if (d.id === id) return l.label
          }
        }
      }
      return ''
    },
    saveBatchConfig() {
      this.tableLoading = true
      setTimeout(() => {
        this.tableLoading = false
        this.$message.success('批量配置已保存！')
      }, 800)
    }
  }
}
</script>

<style scoped>
.data-collection-control {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 0;
}
.box-card {
  margin-bottom: 24px;
}
.freq-setting {
  display: flex;
  align-items: center;
}
.device-management {
  display: flex;
  flex-direction: row;
  gap: 32px;
}
.device-tree {
  min-width: 260px;
  max-width: 260px;
  background: #fafbfc;
  border-right: 1px solid #eee;
  padding: 12px 0 12px 12px;
}
.device-table {
  flex: 1;
  padding-left: 24px;
}
</style>
